<template>
  <ul class="color-picker" :class="{active: active}" :style="wrapStyle">
    <input type="text" v-model="inputval" ref="input" @click="copyColor(inputval)" :style="inputStyle">
    <input type="text" v-model="rgbaColorVal" ref="input16" @click="copySixtennColor" :style="inputStyle" readonly>
    <span @click="active = !active"/>
    <li v-for="(colorGroup, index) in colors" :key="index">
      <div>
        <span>{{colorGroup.name}}</span>
        <span>{{colorGroup.enName}}</span>
      </div>
      <ul>
        <li v-for="(color, key) in colorGroup.color" :key="key" :style="getStyle(color)" @click="copyColor(color)"></li>
      </ul>
    </li>
  </ul>
</template>
<script>
import color from "./color.js";
import colorConf from "./colorConf.js";
export default {
  name: 'popup',
  props: ["conf"],
  data() {
    return {
      active: false,
      inputval: "",
      rgbaColorVal: "",
      colors: colorConf,
    }
  },
  computed: {
    wrapStyle() {
      return {
        boxShadow: `0 2px 4px ${this.inputval || `#ccc`}`,
      }
    },
    inputStyle() {
      return {
        backgroundColor: this.inputval || `#ccc`
      }
    },
  },
  watch: {
    inputval() {
      this.rgbaColorVal = color.parseSixTeenColor(this.inputval);
    },
  },
  methods: {
    copySixtennColor() {
      this.$refs.input16.select();
      document.execCommand("Copy");
    },
    copyColor(color) {
      this.inputval = color;
      setTimeout(() => {
        this.$refs.input.select();
        document.execCommand("Copy");
        this.colors.setRecentColor(color);
      }, 0);
    },
    getStyle(color) {
      return {
        backgroundColor: color
      }
    }
  },
}
</script>
<style scoped>
  .color-picker > span {
    display: block;
    position: absolute;
    top: 14px;
    left: -50px;
    width: 50px;
    height: 50px;
    background-color: #a0d911;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
  }

  .color-picker > span:before,
  .color-picker > span:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 10%;
    top: 50%;
    left: 50%;
    background-color: #fff;
    border-radius: 4px;
  }

  .color-picker > span:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .color-picker > span:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .color-picker {
    position: absolute;
    top: 100px;
    right: 0;
    background-color: #fff;
    color: #fff;
    padding: 10px;
    border-radius: 4px 0 0 4px;
    transition: all .3s;
    transform: translateX(100%);
  }

  .color-picker.active {
    transform: translateX(0);
  }

  .color-picker > li {
    padding: 2px 0;
  }

  .color-picker > li > div {
    padding: 2px 0;
  }

  .color-picker > li > div > span:first-child {
    color: #666;
    font-size: 14px;
    font-weight: bold;
  }

  .color-picker > li > div > span:last-child {
    padding-left: 4px;
    color: #999;
    font-size: 12px;
  }

  .color-picker > li > ul > li {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    opacity: 1;
  }

  .color-picker > li > ul > li:active {
    opacity: .9;
  }

  .color-picker input {
    color: #fff;
    width: 80px;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: #fff;
    transition: all .3s;
  }
</style>
